import 'package:flutter/material.dart';
import 'package:flutter_base_study/scaffold/page/cart.dart';
import 'package:flutter_base_study/scaffold/page/home.dart';
import 'package:flutter_base_study/scaffold/page/mine.dart';
import 'package:flutter_base_study/scaffold/page/person.dart';

/**
 * BottomNavigationBar  + Tabbar
 */
class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  ///模块
  List pages = const [Home(), Person(), Cart(), Mine()];

  ///底部导航
  List<BottomNavigationBarItem> bottoms = const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: '人员'),
    BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: '购物车'),
    BottomNavigationBarItem(icon: Icon(Icons.minimize), label: '我的'),
  ];

  final List<Widget> _img = const [
    CircleAvatar(
      backgroundImage: NetworkImage(
          'https://www.sinaimg.cn/dy/slidenews/4_img/2013_12/704_916087_560617.jpg'),
      radius: 100,
    ),
    CircleAvatar(
      backgroundImage: NetworkImage(
          'https://www.sinaimg.cn/dy/slidenews/4_img/2013_12/704_916087_560617.jpg'),
      radius: 50,
    ),
  ];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///----------顶部标题样式设置
      appBar: AppBar(
        title: Text('Scaffolf 示例'),
        backgroundColor: Colors.deepPurple,
        centerTitle: true,

        //右侧按钮 和右侧抽屉冲突
        // actions: [
        //   IconButton(onPressed: () {}, icon: Icon(Icons.search)),
        //   IconButton(onPressed: () {}, icon: Icon(Icons.add)),
        // ],

        ///和抽屉按钮位置相同，二选一
        // leading: FlutterLogo(
        //   style: FlutterLogoStyle.stacked,
        // ),
      ),

      ///-------------抽屉 （通常放listview）
      drawer: Drawer(
        child: ListView(
          //不设置为透明色，设置为和背景图一个色
          padding: EdgeInsets.zero,
          children: [
            //顶部介绍和背景图
            // DrawerHeader(
            //   child: Text(
            //     '介绍',
            //     style: TextStyle(color: Colors.red, fontSize: 20),
            //   ),
            //   decoration: BoxDecoration(
            //       color: Colors.deepPurple,
            //       image: DecorationImage(
            //         image: NetworkImage(
            //             'http://pic1.win4000.com/wallpaper/e/568f4433667e6.jpg'),
            //         fit: BoxFit.cover,
            //       )),
            // ),

            // 有背景图，有圆角
            Row(
              children: [
                Expanded(
                    child: UserAccountsDrawerHeader(
                  accountName: Text('高圆圆'),
                  accountEmail: Text('gaoyuan@.com'),
                  otherAccountsPictures: _img,
                  //圆形头像图片
                  currentAccountPicture: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://img2.baidu.com/it/u=1500237400,1740832790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'),
                  ),
                  //背景
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          'http://pic1.win4000.com/wallpaper/e/568f4433667e6.jpg'),
                    ),
                  ),
                ))
              ],
            ),

            //单条数据
            ListTile(
              title: Text('用户参数'),
              trailing: Icon(Icons.keyboard_arrow_right),
            ),
            ListTile(
              title: Text('用户参数'),
              trailing: Icon(Icons.keyboard_arrow_right),
            ),
            ListTile(
              title: Text('用户参数'),
              trailing: Icon(Icons.keyboard_arrow_right),
            ),
            ListTile(
              title: Text('用户参数'),
              trailing: Icon(Icons.keyboard_arrow_right),
            ),
            ListTile(
              title: Text('用户参数'),
              trailing: Icon(Icons.keyboard_arrow_right),
            ),
          ],
        ),
      ),
      endDrawer: const Drawer(
        child: Text('右侧抽屉'),
      ),

      ///---------悬浮按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        //切换按钮背景颜色
        backgroundColor: currentIndex == 0 ? Colors.red : Colors.green,

        //设置为圆形，默认是矩形
        shape: CircleBorder(),
      ),

      //floatingActionButton位置控制
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      ///-------底部导航
      bottomNavigationBar: BottomNavigationBar(
        items: bottoms,
        //选中的颜色
        fixedColor: Colors.red,
        //底部菜单的大小
        iconSize: 35,
        //底部有4个或4个以上的菜单时
        //解决底部按钮不显示问题（底部tab超过3个不显示）
        //小于等于3个默认属性为fixed,超过3个为shifting属性
        type: BottomNavigationBarType.fixed,
        //页面切换
        currentIndex: currentIndex,
        onTap: (index) {
          //点击菜单触发的方法
          //注意 重新执行build
          setState(() {
            currentIndex = index;
          });
        },
      ),

      ///当前显示的界面
      body: pages[currentIndex],
    );
  }
}
